<template>
  <div>
    <el-row :gutter="20" style="margin-bottom: 20px">
      <el-col :span="12">
        <!-- 运营人员 -->
        <el-card class="box bluebox">
          <div class="title">运营人员（当天）</div>
          <div class="body">
            <div class="item">
              <div class="content">
                <span class="num">{{ runTaskReport.total }}</span>
                <span class="declare">工单总数（个）</span>
              </div>
            </div>
            <div class="item">
              <div class="content">
                <span class="num">{{ runTaskReport.completedTotal }}</span>
                <span class="declare">完成工单（个）</span>
              </div>
            </div>
            <div class="item">
              <div class="content">
                <span class="num">{{ runTaskReport.cancelTotal }}</span>
                <span class="declare">拒绝工单（个）</span>
              </div>
            </div>
            <div class="item">
              <div class="content">
                <span class="num">{{ runTaskReport.workerCount }}</span>
                <span class="declare">运营人员数（个）</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <!-- 运维人员 -->
        <el-card class="box redbox">
          <div class="title">运维人员（当天）</div>
          <div class="body">
            <div class="item">
              <div class="content">
                <span class="num redNum">{{ repairTaskReport.total }}</span>
                <span class="declare resDeclare">工单总数（个）</span>
              </div>
            </div>
            <div class="item">
              <div class="content">
                <span class="num redNum">{{
                  repairTaskReport.completedTotal
                }}</span>
                <span class="declare resDeclare">完成工单（个）</span>
              </div>
            </div>
            <div class="item">
              <div class="content">
                <span class="num redNum">{{
                  repairTaskReport.cancelTotal
                }}</span>
                <span class="declare resDeclare">拒绝工单（个）</span>
              </div>
            </div>
            <div class="item">
              <div class="content">
                <span class="num redNum">{{
                  repairTaskReport.workerCount
                }}</span>
                <span class="declare resDeclare">运维人员数（个）</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="18">
        <!-- 工单状态 -->
        <!-- 可以加keep-alive -->
        <div class="box"><PickDate :today="today" :weekStart="weekStart" :monthStart="monthStart" :yearStart="yearStart" /></div>
      </el-col>
      <el-col :span="6"><div class="box"><Rank :monthStart="monthStart" :today="today"/></div></el-col>
    </el-row>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import PickDate from './components/PickDate.vue'
import Rank from './components/Rank.vue'
import { getTaskReport } from '@/api/person'
export default {
  components: {
    PickDate,
    Rank
  },
  async created () {
    // 运营 / 运维 统计
    const todayStart = dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss')
    const todayEnd = dayjs().endOf('date').format('YYYY-MM-DD HH:mm:ss')
    const res = await getTaskReport(todayStart, todayEnd)
    this.runTaskReport = res[0]
    this.repairTaskReport = res[1]
  },
  data () {
    return {
      runTaskReport: {},
      repairTaskReport: {}
    }
  },
  methods: {
    // 将两个对象的同一属性进行值相加 ---运营人员/运维人员 工单统计
    // totalMerge (obj1 = {}, obj2 = {}) {
    //   const obj = {}
    //   const arr = Object.keys(obj1)
    //   arr.forEach((k) => {
    //     obj[k] = (obj1[k] || 0) + (obj2[k] || 0) // 找真
    //   })
    //   return obj
    // }
  },
  computed: {
    todayStart () { return dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss') }, // 2022-11-24 00:00:00},
    todayEnd () { return dayjs().endOf('date').format('YYYY-MM-DD HH:mm:ss') }, // 2022-11-24 23:59:59}
    today () { return dayjs().format('YYYY-MM-DD') },
    monthStart () { return dayjs().startOf('month').format('YYYY-MM-DD') },
    yearStart () { return dayjs().startOf('year').format('YYYY-MM-DD') },
    weekStart () { return dayjs().startOf('week').add(1, 'day').format('YYYY-MM-DD') }
  },
  watch: {},
  filters: {}
}
</script>

<style scoped lang="scss">
.box {
  border-radius: 20px;
  background-color: #fff;
  padding: 20px;
}
.bluebox {
  background-color: #e9f3ff;
  background-image: url(),
    url();
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, calc(100% - 12px) 100%;
}
.redbox {
  background-color: #fbefe8;
  background-image: url("http://likede2-admin.itheima.net/img/operation.4120cc58.png");
  background-repeat: no-repeat;
  background-position: calc(100% - 12px) 100%;
}
.title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}
.el-card {
  padding: 0;
  .body {
    display: flex;
    .item {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 108px;
      .content {
        display: flex;
        flex-direction: column;
        width: 96px;
        height: 70px;
        margin: auto;
        .declare {
          font-size: 12px;
          font-weight: normal;
          color: #91a7dc;
        }
        .num {
          font-size: 36px;
          font-weight: 600;
          color: #072074;
          text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
          margin-bottom: 5px;
        }
        .resDeclare {
          color: #de9690;
        }
        .redNum {
          color: #ff5757;
          text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
        }
      }
    }
  }
}
</style>
